<template>
  <div class="main animate__animated animate__fadeInDown">

    <div style="display: flex;">
      <div style="margin-left: 5px">
        <el-input style="width: 400px;margin-left: 450px" suffix-icon="el-icon-search" placeholder="请输入搜索内容" v-model="key"></el-input>
        <el-button type="success" style="margin-left: 5px" @click="search()">搜索</el-button>
        <el-button type="danger" style="margin-left: 5px" @click="clear()">清空</el-button>

      </div>
    </div>

    <div style="display: flex;grid-gap: 10px;margin-top: 10px">
      <div class="card" style="width: 150px;height: 760px">
        <div class="type-item" :class="{'type-item-active' :item.problemTypeName===currentName}"
             v-for="item in typeList " :key="item.id" @click="selectType(item.problemTypeName,item.id)">
          {{ item.problemTypeName }}
        </div>
      </div>

      <div class="card" style="height: 760px;width: 900px;">
        <div v-if="questionList.length > 0" v-for="(item,index) in questionList" :key="index" class="question-container"
             @click="openDetailPage(item.id)">
          <div class="question ">
            <img :src="item.problemHover" alt="">
            <div class="author-info">
              <img style="width: 18px; height: 20px; border-radius: 10px;margin-left: 115px" :src="item.studentAvatar"
                   alt="">
              <span style="margin-left: 1px">{{ item.studentName }}</span>
              <span style="margin-left: 20px"><i class="el-icon-date"></i> {{ item.createTime }}</span>
              <div class="question-type">{{ item.problemTypeName }}</div>
            </div>
            <div class="question-content">
              <h2>{{ item.problemTitle }}</h2>
            </div>
            <div class="interactions">
              <div class="browse">
                <img style="width: 25px; height: 25px; background-color: transparent !important;"
                     src="@/assets/images/browse.png" alt="">
                <span>{{ item.browerNumber }}</span>
              </div>
              <div class="like">
                <img style="width: 25px; height: 25px; background-color: transparent !important;"
                     src="@/assets/images/like.png" alt="">
                <span style="margin-right: 5px">{{ item.likeNumber }}</span>
              </div>
              <div class="favorite">
                <img style="width: 25px; height: 25px; background-color: transparent;" src="@/assets/images/collect.png"
                     alt="">
                <span>{{ item.collectNumber }}</span>
              </div>
            </div>
          </div>
        </div>

        <div v-if="code===400" class="no-data">
          <div>
            <img src="@/assets/images/problem.png" alt="">
          </div>
          <h1>还没有对应的问答哦,敬请等待哦!</h1>
        </div>

        <!-- 分页插件容器 -->
        <div class="pagination-container" v-if="code===200">
          <el-pagination
              big
              background
              :key="paginationKey"

              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="total"
              :current-page="currentPage"
              :page-size="size"
              class="mt-4"
          />
        </div>


      </div>

      <div>
        <div class="card" style="width: 220px; height: 80px;">
          <span style="margin-left: 5px">{{ greeting }}</span>
          <div>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;{{ advice }}</p>
          </div>
        </div>
        <div class="card" style="width: 220px;height: 170px;margin-top: 10px">
          <img src="@/assets/images/sentence.png" alt="" style="width: 20px;height: 15px">
          <span style="margin-left: 5px"> 每日一言</span>
          <div style="float: right;cursor: pointer" @click="refresh"><i class="el-icon-refresh"/>换一换</div>
          <hr>
          <div style="margin-left: 5px">&nbsp;&nbsp;&nbsp;&nbsp;{{ sentence }}
            <i class="el-icon-document-copy" @click="copySentence" style="color: #1890ff;cursor: pointer"/>
          </div>
        </div>
        <div class="card" style="width: 220px;height: 410px;margin-top: 10px">
          <img src="@/assets/images/top.png" alt="" style="width: 20px;height: 15px">
          <span style="margin-left: 5px">最新发布</span>
          <hr>
          <div v-for="(item, index) in questionTopList" :key="item.id" class="article-list" @click="goDetail(item.id)">
            <span :class="{'red-color': index < 3}">{{ index + 1 }}. </span>
            <el-tooltip :content="item.problemTitle" placement="top">
              <span class="single-line">{{ item.problemTitle }}</span>
            </el-tooltip>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script xmlns="http://www.w3.org/1999/html">
export default {
  name: "LayoutMain",
  data() {
    return {
      typeList: [],
      questionTopList: [],
      currentName: '全部',
      questionList: [],
      currentPage: 1,
      size: 4,
      total: 0,
      paginationKey: 0,
      key: '',
      sentence: '',
      greeting: '',
      advice: '',
      currenTypeId: 0,
      code: 0
    }
  },
  created() {
    this.getQuestionAllType()
    this.getQuestionList()
    this.getQuestionTopList()
    this.getSentence()
    this.updateMessages()
  },
  methods: {
    getQuestionAllType() {
      this.request.get('problem/problemtype/findProblemTypeList')
          .then(res => {
            this.typeList = res.problemTypeList
            this.typeList.unshift({problemTypeName: '全部'})
          })
    },
    selectType(typeName, id) {
      this.currentPage = 1; // 重置页数为第一页
      this.paginationKey += 1; // 增加 key 的值来强制重新渲染分页组件
      this.currenTypeId = id;
      if (typeName === '全部') {
        this.getQuestionList()
      } else {
        this.getQuestionByType()
      }
      this.currentName = typeName
    },
    getQuestionList() {
      this.request.get('problem/problem/list', {
        params: {
          page: this.currentPage,
          limit: this.size,
          key: this.key
        }
      })
          .then(res => {
            if (res.code===200){
              this.total = res.page.totalCount
              this.questionList = res.page.list
            }else if (res.code===400){
              this.questionList=[]
            }
            this.code = res.code
          })

    },
    getQuestionByType() {
      this.request.get('problem/problem/findProblemByType/' + `${this.currentPage}` + "/" + `${this.size}` + "/" + this.currenTypeId)
          .then(res => {
            this.code = res.code
            this.total = res.count
            this.questionList = res.problemVoList
          })
    },
    // 每页数
    handleSizeChange(val) {
      this.size = val
      this.currentPage = 1
      if (this.currentName === '全部') {

        this.getQuestionList()
      } else {
        this.getQuestionByType()
      }

    },
    // 当前页
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val; // 确保更新 currentPage 的值
      if (this.currentName === '全部') {
        this.getQuestionList();
      } else {
        this.getQuestionByType(); // 现在会使用更新后的 currentPage 请求数据
      }


    },
    openDetailPage(id) {
      // 调用后端接口更新浏览次数
      this.request.get(`problem/problem/updateBrowseNumber/${id}`)
          .then(res => {
            console.log('浏览次数更新成功');
            // 成功后再跳转到详情页
            this.$router.push(`/questionDetail/${id}`);
          })
          .catch(error => {
            console.error('浏览次数更新失败', error);
            // 即使更新失败也允许跳转（可根据实际需求调整）
            this.$router.push(`/questionDetail/${id}`);
          });
    }
    ,
    getQuestionTopList() {
      this.request.get('problem/problem/findTopList')
          .then(res => {
            this.questionTopList = res.problemTopVoList
          })
    },
    getSentence() {
      this.request.get('/article/sentence/findById')
          .then(res => {
            this.sentence = res.sentence.sentence
          })
    },
    refresh() {
      this.getSentence()
    },
    updateMessages() {
      const hour = new Date().getHours();
      if (hour < 5) {
        this.greeting = '深夜了🌌';
        this.advice = '该休息了，保持充足的睡眠哦！';
      } else if (hour < 8) {
        this.greeting = '早上好☀️';
        this.advice = '一天之计在于晨，新的一天开始了哦!';
      } else if (hour < 12) {
        this.greeting = '上午好🌤';
        this.advice = '工作学习的时间到了，加油！';
      } else if (hour < 14) {
        this.greeting = '中午好🌞';
        this.advice = '吃过午饭了吗？记得午休哦！';
      } else if (hour < 18) {
        this.greeting = '下午好🍂';
        this.advice = '下午的时光也很宝贵，继续努力！';
      } else if (hour < 21) {
        this.greeting = '傍晚好🌆';
        this.advice = '傍晚适合散步放松，享受生活！';
      } else {
        this.greeting = '夜晚好🌙';
        this.advice = '夜深了，准备休息吧！';
      }
    },
    async copySentence() {
      try {
        // 使用navigator.clipboard.writeText复制文本到剪贴板
        await navigator.clipboard.writeText(this.sentence);
        this.$message.success('复制成功！');
      } catch (err) {
        this.$message.success('复制失败，请手动复制。');
      }
    },
    goDetail(id) {
      this.$router.push(`/questionDetail/${id}`);

    },
    search(){
      this.currentName = '全部'; // 将类型选中为全部
      this.currentPage = 1; // 重置页数为第一页
      this.paginationKey += 1; // 增加 key 的值来强制重新渲染分页组件=1
      this.getQuestionList()
    },
    clear(){
      this.key=''
    }

  }
}
</script>


<style scoped>

body {
  background-color: #e4e6eb;
}


.main {
  margin-top: 1px;
  margin-left: 130px;

}

.card {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.1);
}


.type-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;

}

.type-item-active {
  background-color: #52bcce;
  color: #FFFFFF;
  border-radius: 5px;
}

.question-container {
  display: flex;
  height: 170px;
}

.question {
  display: flex;
  align-items: center;
  width: 800px;
  margin: auto;
  background-color: #ffffff;
  border: 1px solid #938d8d;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */

}

.question:hover {
  transform: translateY(-5px); /* 鼠标悬浮时上移 */
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 12px 22px rgba(0, 0, 0, 0.2); /* 悬浮时增加阴影 */
}

.article-list {
  display: flex;
  margin: 15px 0;
}

.single-line {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  max-width: 90%; /* 根据需要调整最大宽度 */
  cursor: pointer;
}

/* 新增的红色字体样式 */
.red-color {
  color: red;
}

.question h2 {
  margin-top: -35px;

}

.question p {
  margin-top: 1px;
}

.question img {
  width: 100px;
  height: 100px;
  margin-right: 7px;
  border-radius: 10px;
}

.question h2 {
  font-size: 24px;
}

.question p {
  font-size: 16px;
}

.question-type {
  position: absolute;
  top: -3px;
  right: -205px;
  padding: 5px 8px;
  background-color: orange;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
}


.question-tag {
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
  padding: 5px 10px;
  background-color: orange;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
}

.author-info {
  margin-top: 70px;
  position: absolute;
  display: flex;
  align-items: center;
}

.interactions {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  margin-right: 10px;
  margin-top: 70px;
}

.interactions .like,
.interactions .browse,
.interactions .favorite {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.interactions img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.interactions span {
  font-size: 12px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 24px;
  color: #666;
}

.no-data img {
  width: 300px;
  height: 300px;
  margin-bottom: 20px;
  margin-top: 500px;
}


</style>